<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>window</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
    
    <style>
     
     /* 头部样式 */
     .topbar {background: #f2f2f2; height:50px; border-bottom: 1px solid #DDDFE3;}
     .topbar_title {display: inline-block;font-size: 20px; line-height: 50px;padding-left: 12px;}
     .hr01, .hr02 {height: 28px;}
     .headerico {padding: 11px 15px 11px 15px;}
     .headericohover {background: #DADDE0;}
     .fr{float: right;}
     .fl{float: left;}
     
     /*第一头部*/
     #logo {padding: 11px 0 0 10px;height: 28px;}
     #citylist {height: 50px; line-height: 50px;padding-left: 15px; font-size: 18px; color: #6ab494;}
     .citylistarrow {vertical-align: top; width: 20px; padding-top: 15px;}
    .search {height: 34px;line-height: 34px; padding-left: 10px; border-radius: 30px;  margin-top: 8px; position: absolute; left: 20px; right: 60px;font-size: 14px;}
    .search img {vertical-align: top; width: 20px; padding-top: 7px;padding-right: 10px;}
    .firstSearch {left: 90px;right: 60px;background-color: #e5e5e5;color: #999;}

     /* 头部切换样式 */
     .titlebar {display: none;}
     .activebar {display: block;}
     
     /* 底部切换按钮样式 */
     ul {display: -webkit-box; display: -webkit-flex; display: flex; }
     #footer {height: 61px; line-height: 60px; background-color: #f2f2f2;border-top: 1px solid #FAFAFA; }
     #footer li{-webkit-box-flex: 1; -webkit-flex: 1; flex:1; height: 60px;}

     /* 选项卡样式 */
     .scrollbar {display: -webkit-box;display: -webkit-flex; display: flex;text-align: center; height: 40px; line-height: 40px;background: #EBECF0;font-size: 12px;position: relative;}
     .col1 {-webkit-box-flex:1;-webkit-flex: 1;flex:1;color: #909090;}
     .indexbar {position: absolute;/*background: #0fc;*/width: 50%;height: 5px;left: 0px;bottom: 0px;-webkit-transition: 300ms;}
     .redbox {background: #DB4646;width: 40px;height: 5px;position: relative;left: auto;right: auto; margin-left: auto; margin-right: auto;}

     /********************/
     /* 底部按钮原始样式 */
     /********************/
     .bbtn01 {background: url(../image/main_index_home_normal.png) no-repeat center 4px; }
     .bbtn02 {background: url(../image/main_index_tuan_normal.png) no-repeat center 4px; }
     .bbtn03 {background: url(../image/main_index_search_normal.png) no-repeat center 4px; }
     .bbtn04 {background: url(../image/main_index_my_normal.png) no-repeat center 4px; }
     .bottom_btn {width: 99%; height: 43px;padding-top: 18px;background-position-y: 4px; background-size: 30px;  font-size: 12px; color: #A5A5A5;}
     
     /* 底部按钮激活样式 */
     .activebtn0 {background: url(../image/main_index_home_pressed.png) no-repeat center 4px; }
     .activebtn1 {background: url(../image/main_index_tuan_pressed.png) no-repeat center 4px; }
     .activebtn2 {background: url(../image/main_index_search_pressed.png) no-repeat center 4px; }
     .activebtn3 {background: url(../image/main_index_my_pressed.png) no-repeat center 4px; }
     .activebtn {color:#6ab494; background-size: 30px; }
     .bottomhover {background-color: #46494B;}

     /* 本地刷新图标 */
     #localrefresh {display:none;float: right; width: 40px; padding: 5px 10px;}

    </style>
  </head>
  <body>
    <div id="wrap">
      <!-- 第一头部 -->
      <div id="firstHeader" class="titlebar activebar">
        <div class="topbar">
          <div class="citylist fl" id="citylist" tapmode onclick="">北京<img src="../image/title_home_arrow_down_normal.png" alt="" class="citylistarrow"></div>
          <div class="search firstSearch" tapmode onclick="">
              <img src="../image/ic_home_search.png" alt="">输入商户名、地点
          </div>
          <img src="../image/send_msg.png" alt="" class="fr headerico hr01"  tapmode="" onclick="">
        </div>
      </div>
      <div id="main">
        
      </div>
      <div id="footer">
        <ul>
          <li tapmode="activebtn0 activebtn" onclick="">
            <a class="bottom_btn bbtn01 weixin activebtn activebtn0">首页</a>
          </li>
          <li tapmode="activebtn1 activebtn" onclick="">
            <a class="bottom_btn bbtn02 communicate">团购</a>
          </li>
          <li tapmode="activebtn2 activebtn" onclick="">
            <a class="bottom_btn bbtn03 discover">发现</a>
          </li>
          <li tapmode="activebtn3 activebtn" onclick="">
            <a class="bottom_btn bbtn04 home">我的</a>
          </li>
        </ul>
      </div>
    </div>
  </body>
  <script type="text/javascript" src="../script/api.js"></script>
  <script type="text/javascript">
   var firstHeader = $api.byId('firstHeader');
   var firstHeaderOffset;
   
   var main = $api.byId('main');
   var mainPos = $api.offset(main);

   var footer = $api.byId('footer');
   var footerPos = $api.offset(footer);

    // 完成首页初始化
    apiready = function(){
        // 设置ios7的标题栏字体变亮，全局用一个就行了
        api.setStatusBarStyle({
        style: 'dark'
        });
        firstHeader = $api.byId('firstHeader');
        $api.fixIos7Bar(firstHeader);
        firstHeaderOffset = $api.offset(firstHeader);
        var main = $api.byId('main');
        var mainPos = $api.offset(main);
        var footer = $api.byId('footer');
        var footerPos = $api.offset(footer);

        api.openFrame ({
            name: 'apicloudFrame1',
            url: './apicloudFrame1.html',
            rect:{
            x:0,
            y:firstHeaderOffset.h,
            w:'auto',
            h:api.frameHeight-firstHeaderOffset.h -footerPos.h
            },
            bounces: true,
            opaque: false,
            vScrollBarEnabled:false,
            hScrollBarEnabled:false
        });
    };
  </script>
</html>